<template>
  <div class="water-chart-03 chart" ref="waterChart03"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";

const waterChart03 = ref(null);
const echarts = inject("$echarts");
import "echarts-liquidfill";

const seriesData = 0.667;
const option = {
  compCode: 'C202310003',
  backgroundColor: 'rgb(3,23,30)',
  title: {
    show: true,
    text: '处理率', // 标题名字
    x: '50%',
    y: '60%',
    z: 10,
    textAlign: 'center', // 文字位置
    textStyle: {  // 文字样式设置
      color: '#ffffff',
      fontSize: 14
    },
  },
  series: [
    {
      backgroundStyle: {
        borderWidth: 2,
        borderColor: '#46F4FA',
        shadowBlur: 50,
        shadowColor: '#46F4FA',
        color: 'rgba(255,255,255,0.3)', // 水球未到的背景颜色
        opacity: 0.27,
      },
      type: 'liquidFill',
      radius: '50%',
      center: ['50%', '50%'],
      color: [
        new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#02b1fe'
              },
              {
                offset: 1,
                color: '#3f92fc' 
              }
            ],
            false
          )
      ],
      data: [seriesData],
      label: {
        formatter: seriesData * 100 + '%',//水球上显示文字，可以设置任意文字
        show: true,
        textStyle: {
          color: '#ffffff',//水球显示文字颜色
          fontSize: 26,
          fontFamily: 'Arial',
          fontWeight: 'bold'
        }
      },
      outline: {
        // 是否显示外圈
        show: false
      },
    },
  ]
};

onMounted(() => {
  const chart = echarts.init(waterChart03.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
